<div class="container">
  <div class="row">
    <div class="col-md-12" >
      
      <h1 class="white text-center" ng-show="!settings.editCityName">{{ settings.cityName }} <i class="fa fa-pencil" style="font-size: 14px; cursor: pointer" ng-click="settings.editCityName = true" ng-if="settings.allowEditCityName"></i></h1>
      <h1 class="text-center" ng-show="settings.editCityName"><input type="text" name="importText" ng-model="settings.cityName" style="width:40%" maxlength="20"> <i class="fa fa-check-square green produceText" style="cursor: pointer;" ng-click="settings.editCityName = false"></i></h1>
      <hr/>
      
      <div class="progress" ng-if="settings.level < 16">
            <div 
            class="progress-bar progress-bar-info progress-bar-striped"
            style="width: {{ 100 - (((20 *(settings.level + 1)) - stats.goalHighest)/20)*100 }}%"><span class="show">再完成 {{ (20 * (settings.level + 1)) - stats.goalHighest }} 个目标，就可以达到等级 {{ settings.level + 1 }}</span></div>
      </div>
      <div class="progress" ng-if="settings.level == 16">
            <div 
            class="progress-bar progress-bar-info progress-bar-striped"
            style="width: {{ 100 - ((goalsMeta.length - goals.length)/13)*100 }}%"><span class="show">再完成 {{ goalsMeta.length - goals.length }} 个目标，就可以通关了。</span></div>
      </div>
      <h4 class="white text-center">城市等级 {{ settings.level }}</h4>
      <h5 class="white opensans text-center">
        城市等级是基于你在游戏中达到的最高目标。<br/>
        全部游戏的最高目标数量: {{ stats.goalHighest }}/{{ goalsMeta.length }} | 当前游戏的最高目标数量: {{goals.length}}/{{goalsMeta.length}}
      </h5>
      
      
      
      <div>
        <img class="center-block" ng-src="{{cityLayouts[settings.level].image[settings.cityLayout].url}}">
      </div>
      
      <h2 class="white luckiest text-center">支持率</h2>
      <hr/>
      <div class="progress">
            <div 
            class="progress-bar progress-bar-success progress-bar-striped active"
            style="width: {{ happiness.sliderValue }}%"><span class="show">{{ happiness.sliderValue | number:3 }} 点支持率 <strong ng-if="happiness.sliderValue">| 大约 {{ checkTime() | formatTimer }} 后，支持率变为0%</strong></span></div>
        </div>
      <h4 class="white opensans text-center bold">{{ happiness.text }}</h4>
      <h5 class="white opensans text-center">
        <i>0-8 中立 | 9-39 快乐 | 40-79 高度信心 | 80-100 惊人信心</i>
      </h5>
      <div class="col-md-12">
            <div class="card-wrapper">
              <!--<div class="card-wrapper" ng-if="upgrades[$index].owned == false">-->
              <div class="card">
                <div class="icon-block text-center normalcursor">
                    <i class="fa faicon fa-users" style="margin-top: 10px"></i>
                </div>
                <div class="content-block">
                    <div class="cardtext">
                        <h3>投资于人民</h3>
                        提高支持率 {{ happiness.ratingPercentage }} 点。这可以做很多次。
                        <h4>花费: 
                          <span ng-if="totalMoneyPerSecond()">${{ calculateInvestmentCost() | megaNumber:powerNames:settings.scientificNumbers }}</span>
                          <span ng-if="!totalMoneyPerSecond()">没有可用的</span>
                        </h4>
                    </div>
                    
                    <div class="cardbuttons">
                    
                        <div class="btn-group btn-group-justified" role="group" aria-label="...">
                          <div class="btn-group" role="group">
                            <button type="button" class="btn btn-default luckiest" ng-disabled="curMoney < calculateInvestmentCost() || build[0].auto == false" ng-click="investConfidence(happiness.ratingPercentage)">用现金投资</button>
                          </div>
                        </div>
                    </div>
                </div>
              </div>
            </div>
        </div>

      <br/>
      <br/>
      
    
    <br/><br/>
    <div class="col-md-6">
      <div class="col-md-12 col-center-block text-center">
        
        <h1 class="white">购买改进</h1>
        <hr/>
        <!--<h4 class="white">These tiles will have to be purchased. Also, some will give you powerful bonuses.</h4>-->
        <button class="btn" ng-click="getAllTiles()" ng-if="curCitizens > 100 && tiles.length < tilesMeta.length ">购买你能负担得起的所有改进</button>
        <h4 class="text-center white" ng-if="tiles.length + 3 == tilesMeta.length">所有的城市改进已购买！</h4>
        
        <br/>
        <br/>
      </div>
      
      <!-- Improvements -->
      <div class="col-md-12" ng-repeat="tileUpgrade in tilesMeta | orderBy:'cost'" ng-if="!isInArray(tiles, tileUpgrade.id)">
        <div class="card-wrapper" >
          <div class="card">
            <div class="icon-block text-center icon-block-pol normalcursor">
              
              <i class="fa faicon"><img ng-src="{{ tileUpgrade.tile }}"></i>
  
            </div>
            <div class="content-block">
               
                <div class="cardtext">
                    <h2>{{ tileUpgrade.name }}</h2>
                    {{ tileUpgrade.description }}<br/>
                    <h4>花费: ${{ tileUpgrade.cost | megaNumber:powerNames:settings.scientificNumbers }}</h4>
                </div>
                
                <div class="cardbuttons">
                
                  <div class="btn-group btn-group-justified" role="group" >
                    <div class="btn-group" role="group">
                      <button type="button" class="btn btn-default luckiest tooltips" ng-disabled="curMoney < tileUpgrade.cost"  ng-click="getTile(tileUpgrade)">购买改进
                        <span style="height: 60px; width:450px; left: 28%;" ng-if="tileUpgrade.upgradeRef == 2 && curMoney > tileUpgrade.cost">
                          <strong>购买前:</strong> ${{ totalMoneyPerSecond() | megaNumber:powerNames:settings.scientificNumbers }}/秒<br/>
                          <strong>购买后:</strong> ${{ totalMoneyPerSecond() * tileUpgrade.multiplier | megaNumber:powerNames:settings.scientificNumbers }}/秒
                        </span>
                      </button>
                    </div>
                    
                  </div>
                </div>
            </div>
          </div>
        </div>
      </div>
      
      <!--<h4 class="white text-center" ng-if="tilesMeta.length - (settings.improvementQuantity + tiles.length) > 0">...and {{ tilesMeta.length - (settings.improvementQuantity + tiles.length) }} more</h4>
      
      <div class="text-center col-md-12">
        <h4 class="white opensans" ng-if="curCitizens > 100"><i>Amount of upgrades to show ({{settings.improvementQuantity}})</i></h4>
        <div class="center-block" ng-if="curCitizens > 100">
          <div class="btn-group" role="group">
            <button class="btn" ng-click="settings.improvementQuantity = 1">1</button>
            <button class="btn" ng-click="settings.improvementQuantity = 2">2</button>
            <button class="btn" ng-click="settings.improvementQuantity = 5">5</button>
            <button class="btn" ng-click="settings.improvementQuantity = 10">10</button>
            <button class="btn" ng-click="settings.improvementQuantity = 25">25</button>
            <button class="btn" ng-click="settings.improvementQuantity = 50">50</button>
            <button class="btn" ng-click="settings.improvementQuantity = tilesMeta.length - tiles.length">All</button>
          </div>
        </div>
      </div>-->
      
    </div>
    
    <div class="col-md-6">
      <div class="col-md-12 col-center-block text-center">
        
        <h1 class="white">硬币升级</h1>
        <hr/>
        <br/><br/>
        
        <!--<h4 class="white">These tiles will have to be purchased. Also, some will give you powerful bonuses.</h4>-->
        <div class="card-wrapper">
        <div class="card">
          <div class="content-block">
            <div class="cardtext">
              <h2 class="text-center">当前硬币: {{ coins.value | megaNumber:powerNames:settings.scientificNumbers }}</h2>
                <span>你可以通过购买建筑来赚取硬币。一幢建筑等于一枚硬币。哦，当你开始一个新的城市时，你保留你所有的硬币。购买的升级不会跟随你。</span><br/><br/>
            </div>
          </div>
        </div>
      </div>
        
      </div>
      
      <!-- Coin Upgrades -->
      <div class="col-md-12" ng-repeat="coinUpgrade in coinUpgradesMeta | orderBy:'cost'" ng-if="!isInArray(coinUpgrades, coinUpgrade.id)" ng-hide="(coinUpgrade.id == 18 && settings.allowEditCityName)">
        <div class="card-wrapper" >
          <div class="card">
            <div class="icon-block text-center icon-block-pol normalcursor">
              
              <i class="fa faicon fa-universal-access" ng-class="coins.value < coinUpgrade.cost ? 'icon-disabled' : ''"></i>
  
            </div>
            <div class="content-block">
               
                <div class="cardtext">
                    <h2>{{ coinUpgrade.name }}</h2>
                    {{ coinUpgrade.description }}<br/>
                    <h4>花费: {{ coinUpgrade.cost | megaNumber:powerNames:settings.scientificNumbers }} 硬币</h4>
                </div>
                
                <div class="cardbuttons">
                
                  <div class="btn-group btn-group-justified" role="group" >
                    <div class="btn-group" role="group">
                      <button type="button" class="btn btn-default luckiest tooltips" ng-disabled="coins.value < coinUpgrade.cost || (coinUpgrade.id == 17 && completedGames > 0)"  ng-click="getCoinUpgrade(coinUpgrade)">购买硬币升级
                        <span style="height: 60px; width:450px; left: 28%;" ng-if="coinUpgrade.type == 2 && coins.value > coinUpgrade.cost">
                          <strong>购买前:</strong> ${{ totalMoneyPerSecond() | megaNumber:powerNames:settings.scientificNumbers }}/秒<br/>
                          <strong>购买后:</strong> ${{ totalMoneyPerSecond() * coinUpgrade.multiplier | megaNumber:powerNames:settings.scientificNumbers }}/秒
                        </span>
                        <span style="height: 60px; width:450px; left: 28%;" ng-if="coinUpgrade.id == 17 && completedGames > 0">
                          如果你曾经在城市里完成过一次升级，那么这次升级是不可用的。
                        </span>
                      </button>
                    </div>
                    
                  </div>
                </div>
            </div>
          </div>
        </div>
      </div>
      
      <!--<h4 class="white text-center" ng-if="coinUpgradesMeta.length - (settings.coinQuantity + coinUpgrades.length) > 0">...and {{ coinUpgradesMeta.length - (settings.coinQuantity + coinUpgrades.length) }} more</h4>
      
      <div class="text-center col-md-12">
        <h4 class="white opensans" ng-if="curCitizens > 100"><i>Amount of upgrades to show ({{settings.coinQuantity}})</i></h4>
        <div class="center-block" ng-if="curCitizens > 100">
          <div class="btn-group" role="group">
            <button class="btn" ng-click="settings.coinQuantity = 1">1</button>
            <button class="btn" ng-click="settings.coinQuantity = 2">2</button>
            <button class="btn" ng-click="settings.coinQuantity = 5">5</button>
            <button class="btn" ng-click="settings.coinQuantity = 10">10</button>
            <button class="btn" ng-click="settings.coinQuantity = 15">15</button>
            <button class="btn" ng-click="settings.coinQuantity = coinUpgradesMeta.length">All</button>
          </div>
        </div>
      </div>-->
      
    </div>
    
  </div>
</div>